import React,{ Component } from 'react'
import { Tabs,WhiteSpace } from 'antd-mobile';
import './index.scss'
import request from 'utils/request'
import { Link } from 'react-router-dom'

export default class Category extends Component {
    constructor(props){
        super(props)

        this.state = {
            tabs:[]
        }
    }
    async componentDidMount() {
        const result = await request({
            url:'/index.php',
            method:'GET',
            params:{
                r:'class/category',
                type:1
            }
        })
        // console.log(result.data.data.data)
        if(result){
            result.data.data.data.map(item => item.title = item.name)
            this.setState({
                tabs: result.data.data.data
            })
        }
    }

    renderList = list => {
        return list.map( item => (
            <li key = "item.api_cid">
                <Link
                to={{
                    pathname:`/list/${item.api_cid}`,
                    search:`?cid=${item.api_cid}`
                }}
                >
                    <img src = { item.img }/>
                    { item.name }
                </Link>
            </li>
        ))
    }

    renderFloors = floors =>{
        return floors.map((item,index )=>(
        (
            <div className="floor-box" key = { index }>
                <h3>{item.name}</h3>
                <ul>
                    { this.renderList( item.list ) }
                </ul>
            </div>
        )  
        ) )

    }

    renderContent = tab =>
    (<div style={{  
        padding:'.15rem' ,
        // height: '100%', 
        backgroundColor: '#fff' }}>
      { this.renderFloors( tab.floors ) }
    </div>);

    render(){
        const { tabs } = this.state
        console.log(this.state.tabs)
        return(
            <div className="container">
                    <div className="tab-box">
                        <Tabs 
                        tabDirection="vertical"
                        tabBarPosition="left"
                        tabs={tabs} 
                        renderTabBar={props => <Tabs.DefaultTabBar {...props} page={13} 
                        />}>
                        {this.renderContent}
                        </Tabs>
                    </div>
            </div>
        )
    }
}